<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>基于SSM的高校毕业生就业平台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css" />
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/jQuery3.4.1.js"></script>
    <script src="${pageContext.request.contextPath}/statics/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    html {
        height: 100%;
    }

    body {
        background: #eee;
        background: url(${pageContext.request.contextPath}/statics/img/loginbg.png) 0% 0% / cover no-repeat;
        font-size: 12px;
    }

    .login-main {
        max-width: 428px;
        background-color: #fff;
        padding: 22px 63px 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border-radius: 10px;
        position: absolute;
    }

    .login-main .login-top {
        border-radius: 12px 12px 0 0;
        font-family: SourceHanSansCN-Regular;
        font-size: 30px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #148be4;
        line-height: 117px;
        text-align: center;
        overflow: hidden;
        transform: rotate(0);
    }

    .login-main .login-bottom .center {
        width: 288px;
        margin: 0 auto;
        padding-top: 40px;
        padding-bottom: 15px;
        position: relative;
    }

    .login-main .login-bottom .center .item {
        width: 288px;
        height: 35px;
        border-bottom: 1px solid #dae1e6;
        margin-bottom: 35px;
    }

    .login-main .login-bottom .center .item .icon {
        display: inline-block;
        width: 33px;
        height: 22px;
    }

    .login-main .login-bottom .center .item .icon-2 {
        background: url(${pageContext.request.contextPath}/statics/img/icon-login.png) no-repeat -54px 0;
    }

    .login-main .login-bottom .center .item .icon-3 {
        background: url(${pageContext.request.contextPath}/statics/img/icon-login.png) no-repeat -106px 0;
    }

    .login-main .login-bottom .center .item .icon-4 {
        background: url(${pageContext.request.contextPath}/statics/img/icon-login.png) no-repeat 0 -43px;
        position: absolute;
        right: -10px;
        cursor: pointer;
    }

    .login-main .login-bottom .center .item .icon-5 {
        background: url(${pageContext.request.contextPath}/statics/img/icon-login.png) no-repeat -55px -43px;
    }

    .login-main .login-bottom .center .item input {
        display: inline-block;
        width: 227px;
        height: 22px;
        padding: 0;
        position: absolute;
        border: 0;
        outline: 0;
        font-size: 14px;
        letter-spacing: 0;
    }

    .login-main .login-bottom .tip .icon-nocheck {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        border: solid 1px #9abcda;
        position: relative;
        top: 2px;
        margin: 1px 8px 1px 1px;
        cursor: pointer;
    }

    .login-main .login-bottom .tip .login-tip {
        font-family: MicrosoftYaHei;
        font-size: 12px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #9abcda;
        cursor: pointer;
    }

    .login-main .login-bottom .tip .goto-register {
        font-stretch: normal;
        letter-spacing: 0;
        color: #1391ff;
        text-decoration: none;
        position: absolute;
        right: 62px;
    }

    .login-main .login-bottom .login-btn {
        width: 288px;
        height: 40px;
        border-radius: 16px;
        margin: 24px auto 0;
        font-size: 14px;
        border: none;
    }

    .footer {
        left: 0;
        bottom: 0;
        color: #fff;
        width: 100%;
        position: absolute;
        text-align: center;
        line-height: 30px;
        padding-bottom: 10px;
        text-shadow: #000 0.1em 0.1em 0.1em;
        font-size: 14px;
    }

    input::-webkit-input-placeholder {
        color: #a6aebf;
    }

    input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #a6aebf;
    }

    input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #a6aebf;
    }

    input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #a6aebf;
    }

    input:-webkit-autofill {
        /* 取消Chrome记住密码的背景颜色 */
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
    }

    @media screen and (max-width: 428px) {
        .login-main {
            width: 360px !important;
        }
        .login-main .login-top {
            width: 360px !important;
        }
        .login-main .login-bottom {
            width: 360px !important;
        }
    }

    .tab-nav {
        padding: 32px 32px 11px 32px;
        text-align: center;
        height: 37px;
        width: 20px;
        font-size: 20px;
        font-family: cursive;
        color: #c3c6c9;
        cursor: pointer;
    }

    .tab-nav-active {
        color: rgb(62, 140, 230);
    }

    .tab-indecator {
        left: 33px;
        width: 80px;
        position: relative;
        background-color: #3d7eff;
        height: 3px;
        border-radius: 3px;
        bottom: 0;
        -webkit-transition: left .28s cubic-bezier(0.645, 0.045, 0.355, 1), width .28s cubic-bezier(0.645, 0.045, 0.355, 1), background-color .28s ease-in;
        transition: left .28s cubic-bezier(0.645, 0.045, 0.355, 1), width .28s cubic-bezier(0.645, 0.045, 0.355, 1), background-color .28s ease-in;
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        overflow: hidden;
    }
</style>

<body>
<div class="">
    <div class="login-main">
        <div class="login-top">
            <h2 class="form-signin-heading text-center">
                <a href="/home.html">
                    <img src="${pageContext.request.contextPath}/statics/img/Logo.png" alt="" class="img-fluid" style="width: 288px" /></a>
                <div class="km-n">
                    <span class="tab-nav tab-nav-active">用户登录</span>
                    <span class="tab-nav">企业登录</span>
                    <div class="tab-indecator"></div>
                </div>
            </h2>
        </div>
        <form class="layui-form login-bottom" id="loginForm">
            <div class="text-center" id="t-msg"></div>
            <div class="center">
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="phone" placeholder="请输入手机号" maxlength="24" id="phone" />
                </div>
                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="password" placeholder="请输入密码" maxlength="20" id="password" />
                    <span class="bind-password icon icon-4"></span>
                </div>
            </div>
            <div class="tip">
                <input type="checkbox" class="form-check-input icon-nocheck" value="记住密码" id="rememberMe" name="rememberMe" />
                <label for="rememberMe" class="checkbox login-tip">记住密码</label>
                <a href="#" class="goto-register">注册新用户</a>
            </div>
            <div class="form-item">
                <button class="btn btn-lg btn-primary login-btn" type="submit" id="login">
                    马上登录
                </button>
            </div>
        </form>
    </div>
</div>
<div class="footer">
    ©版权所有 2021-2022 土拨鼠工作室<span class="padding-5">|</span>123123123123
</div>

<script>
    //密码显示
    $(".bind-password").on("click", function() {
        if ($(this).hasClass("icon-5")) {
            $(this).removeClass("icon-5");
            $("input[name='password']").attr("type", "password");
        } else {
            $(this).addClass("icon-5");
            $("input[name='password']").attr("type", "text");
        }
    });



    var i = 0;
    $(".km-n span").on("click", function() {
        if (!$(this).hasClass("tab-nav-active")) {
            $('#msg').remove()
            $(".km-n span").removeClass("tab-nav-active")
            $(this).addClass("tab-nav-active")
            if (i == 0) {
                $(".km-n .tab-indecator").css("left", "186px")
                i = 2
            } else {
                $(".km-n .tab-indecator").css("left", "33px")
                i = 0
            }
        }
    });

    $('.center input').click(function () {
        $('#msg').remove()

    });

    // 进行登录操作
    $('#login').on("click", function () {
        var c = $('.tab-nav-active').text();
        var url = '';
        var href ='';
        if(c === "企业登录"){
            url = 'enterprise/login'
            href = 'enterprise/enterpriseHome.html'
        }else{
            url = 'student/login'
            href = '/home.html'
        }
        $.ajax({
            type: 'POST',
            url: url,
            data: $("#loginForm").serialize(),
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    location.href = href;
                } else {
                    console.log($("#loginForm").serialize())
                    $('#t-msg').html("<span class='text-danger' id='msg'>" + result.message + "</span>")
                    return;
                }
            }
        })
        return false;
    });

</script>
</body>

</html>
